<template>
  <div id="Box">
    <ul>
      <li v-for="item in datas.list">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from "vue";

const datas = reactive<{ list: number[] }>({ list: [] });

onMounted(() => {
  for (let i = 0; i < 40; i++) {
    datas.list.push(i);
  }
});
</script>

<style scoped lang="less">
#Box {
  height: 100%;
  overflow: auto;

  ul {
    // width: 600px;
    height: 100%;
    padding: 0 32px;
    // margin-right: -16px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    background-color: antiquewhite;
    overflow: auto;

    li {
      flex: 1 1 calc(25% - 16px);
      height: 300px;
      //   flex-grow: 0;
      border: 1px solid red;
      text-align: center;
      box-sizing: border-box;
    }
  }

  ul::-webkit-scrollbar {
    width: 0;
  }
}
</style>
